<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        *{
            margin: 0;padding: 0;
        }
        /* html{
            font-size: 12px;
        } */
        header{
            width: 100%;
            height:3.67rem; /* ui设计图给的顶部导航都是88px的 */
            /* 
                px转换成rem:设备像素比(dpr) = 物理像素 / 逻辑像素
                    - 88px / 2 = 44px
                    - 像素转换rem，rem相对于html计算的 44px / 12px = 3.67rem (保留两位小数)
                    - 根据不同的设备改变html的font-size的值
            */
            background: red;
        }
        /* 5 */
        @media all and (max-width:320px){
            html{
                font-size: 12px  /* 3.67rem * 12 = 44px */
            }
        }
        /* 6 7 8 */
        @media all and (min-width:321px) and (max-width:375px){
            html{
                font-size: 14px;  /* 3.67rem * 14 = ? */
            }
        }
        /* plus */
        @media all and (min-width:376px) and (max-width:414px){
            html{
                font-size: 16px;  /* 3.67rem * 16 = ? */
            }
        }
    </style>
</head>
<body>
    <header></header>
</body>
</html>
<!-- 
    总结:
        - css样式 = ui设计图 / 2 计算公式
        - 媒体查询设置 5-12px / 678-14px / plus-16px
 -->